<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Free Box</text>
            </view>
        </view>
        <view>
            <box-item :box-list="boxList" :free="true"></box-item>
        </view>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import CustomTabbar from "@/components/tabbar/tabbar.vue";
import Header from "@/components/header/header.vue";
import BoxItem from "@/components/boxList/boxList.vue";

export default {
    name: "freeBox",
    components: {
        BoxItem,
        Header,
        CustomTabbar,
    },
    data() {
        return {
            // 商品列表
            boxList: [],
        };
    },
    onShow() {
        this.getFreeBox()
    },
    methods: {
        // 返回
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 获取免费箱子
        getFreeBox() {
            this.$u.api.getBoxList({
                is_free_box: 1
            }).then(res => {
                this.boxList = res.data.data;
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}
</style>
